<#-- 表单样式宏 -->
<#include "/base/common.ftl"/>
<@bootstrap.head >
	<script type="text/javascript" src="<@spring.url "/resources/js/jtopo-0.4.8-min.js" />"></script>
</@bootstrap.head>
<@bootstrap.body>
  <!-- 工具栏 -->
  <div style="margin-top:10px;padding:5px 10px 5px 10px;">
  	<button id="addNode" value="" onclick="add()" >添加元素</button>
  	<button id="saveEdit" value="" onclick="save()" >保存编辑</button>
  </div>
  <!-- 画布 -->
  <canvas id="jtopo" width="1200px" height="1000px" style="background-color:#eeeeee;">当前浏览器不支持Canvas,请更换浏览器</canvas>
  <!-- 弹窗 -->
  <div id="dialog-form" title="编辑批量信息" hidden="hidden" style="height:200px;width:400px">
	  <form id="dialogForm" action='<@spring.url "/pmHzbatBatchesInfo/update" />' method='post'>
		  	<table class="tdTextRight">
		  		<tr style="display:none;">
		  		    <@label text="计划名称"/>
		  		    <@input name="scheduleName" placeholder="计划名称" value="${pmHzbatSchedule.scheduleName}"/>
		  		    <td></td>
		  		    <td></td>
		  		</tr>
		  		<tr>
		  			<@label text="批量名称"/>
		  		    <@input name="batchName" placeholder="批量名称"/>
		  		    <@label text="批量描述"/>
		  		    <@input name="batchDesc" placeholder="批量描述"/>
		  		</tr>
		  		<tr>
		  			<@label text="图形编辑坐标Y"/>
		  		    <@input name="viewPosX" placeholder="图形编辑坐标Y"/>
		  		    <@label text="图形编辑坐标Y"/>
		  		    <@input name="viewPosY" placeholder="图形编辑坐标Y"/>
		  		</tr>
		  		<tr>
		  			<@label text="是否允许应用中断"/>
		  		    <@input name="interruptByApp" placeholder="是否允许应用中断"/>
		  		    <td></td>
		  		    <td></td>
		  		</tr>
		  		<tr>
		  			<@label text="开始执行日期时间"/>
		  		    <@date name="beginDatetime" placeholder=""/>
		  		    <@label text="结束执行日期时间"/>
		  		    <@date name="endDatetime" placeholder=""/>
		  		</tr>
		  		<tr>
		  			<@label text="进度"/>
		  		    <@input name="progress" placeholder=""/>
		  		    <td></td>
		  		    <td></td>
		  		</tr>
		  		<tr>
		  			<@label text="准备任务 执行命令"/>
		  		    <@input name="pretaskProgramAndParams" placeholder=""/>
		  		    <@label text="准备任务 超时时间（秒）"/>
		  		    <@input name="pretaskTimeout" placeholder=""/>
		  		</tr>
		  		<tr>
		  			<@label text="准备任务 IP"/>
		  		    <@input name="pretaskIp" placeholder=""/>
		  		    <@label text="准备任务 端口"/>
		  		    <@input name="pretaskPort" placeholder=""/>
		  		</tr>
		  		<tr>
		  			<@label text="准备任务 进度"/>
		  		    <@input name="pretaskProgress" placeholder=""/>
		  		    <td></td>
		  		    <td></td>
		  		</tr>
		  		<tr>
		  			<@label text="准备任务 执行系统响应码"/>
		  		    <@input name="pretaskError" placeholder=""/>
		  		    <@label text="准备任务 执行应用响应码"/>
		  		    <@input name="pretaskStatus" placeholder=""/>
		  		</tr>
		  	</table>
	  </form>
   </div>
</@bootstrap.body>
<script>
	var scheduleName = "${pmHzbatSchedule.scheduleName}" ;
	var jtopo = document.getElementById("jtopo");
	var stage = new JTopo.Stage(jtopo);
	var scene = new JTopo.Scene(stage);
	
	$(document).ready(function(){
		//加载数据
		load();
	});
    
   //数据加载
   function load(){
    	$.ajax({
			url:"<@spring.url "/pmHzbatBatchesInfo/getScheduleBatches" />",
			data:{scheduleName:scheduleName},
			type:"post",
			success:function(text){
			   if(text.success){
			   		drawing(text.data);
			   }
			}
		});
    
    }
    
    //绘制流程图
    function drawing(data){
    	var beginNode = addNode(400,20,"开始");
    	var endNode = addNode(400,550,"结束");
    	if(!data || data.length==0){
    		return false ;
    	}
        for(var i=0;i<data.length;i++){
        	var batches = data[i] ;
        	var fromBatch ;
        	for(var j=0 ; j < batches.length ; j++){
        		var bat = batches[j];
        		if(!window[renameBatch(bat.batchName)]){
        			window[renameBatch(bat.batchName)] = addNode(150*(i+1),80*(j+1),bat.batchName,bat);
        		}
        		var thisBatch = window[renameBatch(bat.batchName)] ;
        		//首节点,则与开始节点连线
        		if( j == 0 ){ 
        			addLink(beginNode,thisBatch,""); 
        		}
				//末节点,则与结束节点连线
				if( j == batches.length - 1 ){ 
        		    addLink(thisBatch,endNode,"");   
        		}
        		//不是首节点
        		if( j > 0 ){
        		    addLink(fromBatch,thisBatch,""); //上一节点连线到本节点
        		}
        		fromBatch = thisBatch ;          //将本节点置为下一节点的上一节点
        	}
        }
    }
 
      //创建节点元素  
	  function addNode(_x,_y,_text,_data){
			var node = new JTopo.Node(_text);
			node.textPosition = "Middle_Center" ;
			node.setLocation(_x,_y);
			node.setSize(80,40);
			node.textOffsetY = -4 ;
			node.borderRadius = 5 ;	
			node.fillColor = "80,165,26";
			node._data = _data;
			node.dbclick(function(e){
				if(e.ctrlKey && e.altKey && confirm("确认删除元素")){ //ctrl + alt + 双击 组合 删除元素
				      scene.remove(node); 
				}else{
					if(node.text == "开始" || node.text == "结束"){
						return false ;
					}
					//填充数据
					$("#dialogForm").autofill(node._data);
					showDialog();
				}
			});
			node.click(function(e){
				if(e.ctrlKey){
				    if(!window["linkArray"]){  //创建一个全局数组，存在放连线的两个元素
				      linkArray = [] ;
				    }
				    if(node.outLinks && node.outLinks.length > 0 && linkArray.length == 0 ){  //如果当前节点已经有了下个节点，则不能再有另外的下个节点
				       return false ;
				    }
					linkArray.push(window[node.name]);				    
				    if(linkArray.length == 2){
                        if(linkArray[0] != linkArray[1]){    //连线时开始节点和结束结节不能是同一个节点
                           addLink(linkArray[0],linkArray[1]);
				    	   linkArray.splice(0,linkArray.length);
                        }else{
                           linkArray.splice(1,1);
                        }
				    }
				}
			});
			scene.add(node);
			return node ;
	  }

      //给节点之间连线
      function addLink(_node1,_node2,_text){
	  		var link = new JTopo.Link(_node1,_node2,_text);
			link.lineWidth = 8 ;
			link.arrowsRadius = 10 ;
			link.dbclick(function(e){
			    if(e.ctrlKey && e.altKey && confirm("确认删除连线？")){   //ctrl + alt + 双击组合 删除连线
				    scene.remove(link);
			    }else{
			    	return false ;
			    }
			});		 
			scene.add(link);
			return link ;
	  }
	  
	  //拼接变量名
	  function renameBatch(name){
	  	return "___" + name + "___";
	  }

	  //新增
	  var nodeNameIndex = 0 ;
	  var newNodes = [] ;
	  function addNewNode(_data){
	      var nodeName = "__node"+nodeNameIndex+"__";
	      window[nodeName] = addNode(30,50+(nodeNameIndex*50),_data.batchName,_data);
	      window[nodeName].name = nodeName ;
	      newNodes.push(nodeName);
	      nodeNameIndex++;
	  }
	  
	  //新增结点
	  function add(){
	  	  var $form = $("#dialogForm") ;
	  	  C._initFormData($form);
		  $("[name='scheduleName']").val("${pmHzbatSchedule.scheduleName}");
	  	  $("#dialog-form").dialog({
					modal:true,  //高亮显示
					//按钮
					buttons:{ 
						"确定":function(){
							var _this = $(this);
							var _data = C._serializeArrayToJson($form.serializeArray());
							addNewNode(_data);
							//关闭窗口
							_this.dialog('close');
						},
						"取消":function(){
							$(this).dialog('close');
						}
					},
					show:{  //显示方式
						effect:"blind",
						duration:500 
					},
					width:700
				});
	  }

      //打开模态窗
      function showDialog(){
			$("#dialog-form").dialog({
				modal:true,  //高亮显示
				//按钮
				buttons:{ 
					"确定":function(){
						var _this = $(this);
						var $form = $("#dialogForm") ;
						$form.ajaxSubmit(function(text){
							if(text.success){
								alert("SUCCESS");
								//更新node._data;
								node._data = C._serializeArrayToJson($form.serializeArray());
								//关闭窗口
								_this.dialog('close');
							}else{
								C._showErrorMessage($form,text.error);
							}							
						});
					},
					"取消":function(){
						$(this).dialog('close');
					}
				},
				show:{  //显示方式
					effect:"blind",
					duration:500 
				},
				width:700
			});
      }
 
      //保存编辑内容
	  function save(){
	  	  console.log(scene);
	  	  var lineArray = [] ;
	  	  var nodeArray = [] ;
	  	  var pmHzbatBatchesInfos = [] ;
	  	  var elements = scene.childs ;
	  	  if(elements && elements.length > 0){
	  	  	  for( var i = 0 ; i < elements.length ; i++ ){
	  	  	  	  var ele = elements[i];
	  	  	  	  if(ele.elementType == "node"){    //节点
	  	  	  	  	 nodeArray.push(ele);
	  	  	  	  	 pmHzbatBatchesInfos.push(ele._data);
	  	  	  	  }else if(ele.elementType == "link"){ //连接线
	  	  	  	  	 lineArray.push(ele);
	  	  	  	  }
	  	  	  }
	  	  	  console.log("========="+JSON.stringify(pmHzbatBatchesInfos));
	  	  	  $.ajax({
	  	  	  	url:"<@spring.url "/pmHzbatBatchesInfo/saveNodes" />",
	  	  	  	data:{"form":JSON.stringify(pmHzbatBatchesInfos)},
	  	  	  	type:"post",
	  	  	  	success:function(text){
	  	  	  	   console.log(text);
	  	  	  	}
	  	  	  });
	  	  	  console.log(nodeArray);
	  	  	  console.log(lineArray);
	  	  	  console.log(pmHzbatBatchesInfos);
	  	  }
	  }

    // pmHzbatBatchesInfo/saveNodes
    
</script>